<template>
	<view>
		<u-toast ref="uToast" />
		<u-card v-for="x in 6" :key="x">
		    <view class="" slot="body" v-model="post">
				<view class="u-body-header u-flex u-row-between u-p-b-0">
				    <u-row customStyle="margin-bottom: 5px">
				        <u-col span="2">
							<u-avatar :src="post.avatar" size="72"></u-avatar>
				        </u-col>
				        <u-col span="10">
				            <view style="font-size: 32rpx;">{{post.author}}</view>
							<view style="font-size: 24rpx;color: #919191;">{{post.date}}</view>
				        </u-col>
				    </u-row>
				</view>
		        <view class="u-body-item u-flex u-col-between u-p-t-0">
		            <view class="u-body-item-title u-line-1">{{post.title}}</view>
					<view class="u-body-item-content u-line-2">{{post.content}}</view>
		            <image :src="post.img" mode="aspectFill"></image>
		        </view>
		        
		    </view>
		    <view class="u-foot u-border-bottom" slot="foot">
				<u-icon name="eye" size="60" color="" :label="post.views" customStyle="margin-left:20px"></u-icon>
				<u-icon name="chat" size="60" color="" :label="post.comments" customStyle="margin-left:20px"></u-icon>
				<u-icon name="thumb-up" size="60" color="" :label="post.likes" @click="like(123)" customStyle="margin-left:20px"></u-icon>
			</view>
		</u-card>
	</view>
</template>

<script>
	export default {
		name:"post-unit",
		data() {
			return {
				post : {
					pid  : "123456",
					avatar : "https://cdn.uviewui.com/uview/album/1.jpg",
					author : "醉挽清风三许月",
					date : "05-11",
					title : "随便写个帖子",
					content : "大部分人不明白怎么写帖子，我今天教你怎么写帖子，你要看好我怎么写帖子，帖子之所以是帖子，正是因为它不好写才称为帖子，你之所以写不好帖子，是因为帖子很难写，但是我能写好帖子",
					img : "https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg",
					views : 8078,
					comments : 1466,
					likes : 3814
				}
			};
		},
		props: {
			posts : {
				
			}
		},
		methods : {
			like(pid){
				this.$refs.uToast.show({
				    title: '点赞成功！',
				    type: 'success',
				})
				this.post.likes += 1
			}
		}
	}
</script>

<style scoped lang="scss">
    .u-card-wrap { 
        background-color: $u-bg-color;
        padding: 1px;
    }
	.u-body-header {
	    font-size: 20rpx;
	    color: #333;
	    padding: 20rpx 10rpx;
		width: 90%;
		margin-left: 5%;
		
	}
    .u-body-item {   
        padding: 20rpx 10rpx;
    }
	.u-body-item-title {
		font-size: 44rpx;
		font-weight: bold;
		color: #333;
		width: 90%;
		margin-left: 5%;
		margin-bottom: 10px;
	}
	.u-body-item-content {
		font-size: 32rpx;
		color: #9a9a9a;
		width: 90%;
		margin-left: 5%;
		margin-bottom: 10px;
	}
    .u-body-item image {
        width: 90%;
        flex: 0 0 120rpx;
        height: 400rpx;
        border-radius: 8rpx;
        margin-left: 5%;
		margin-bottom: 10px;
    }
	.u-foot {
		padding-bottom: 10px;
		display: flex;
	}
</style>